"use client";
import { useState } from 'react';
import React from 'react';
import { Map, AutoComplete } from 'react-bmapgl';
 
 
 
const SearchMap: React.FC = () => {
  const [searchResult, setSearchResult] = useState<string[]>([]);
  const [selectedLocation, setSelectedLocation] = useState<string>('');
  const handleSearchComplete = (result: any) => {
  const pois = result._pois;
  const searchResults = pois.map((poi: any) => `${poi.city} ${poi.district}`);
  setSearchResult(searchResults);
};
  return (
    <div style={{ width: '100%', height: '400px', position: 'relative' }}>
     <Map center={{ lng: 116.404, lat: 39.915 }} zoom={15} style={{ height: '100%', position: 'relative' ,zIndex:'0'}}>
          <AutoComplete
        style={{ width: 300, position: 'absolute', top: 10, left: 10, zIndex: 1000 }}
        onSearchComplete={handleSearchComplete}
        onConfirm={(e: any) => {console.log({e})} }
      />
      </Map>
    </div>
  );
};
 
export default SearchMap;